/**
 * 绘制矩形
 * 参数：cxt、x坐标、y坐标、宽度、高度、圆角、颜色
 */
function fillRoundRect(cxt, x, y, width, height, radius, fillColor) {
  console.log(cxt, "fillRoundRect")
  //圆的直径必然要小于矩形的宽高
  if (2 * radius > width || 2 * radius > height) {
    return false
  }
  cxt.save()
  cxt.translate(x, y)
  //绘制圆角矩形的各个边
  drawRoundRectPath(cxt, width, height, radius)
  cxt.fillStyle = fillColor || "#000" //若是给定了值就用给定的值否则给予默认值
  cxt.fill()
  cxt.restore()
}
// 绘制矩形各个边过程
function drawRoundRectPath(cxt, width, height, radius) {
  cxt.beginPath(0)
  //从右下角顺时针绘制，弧度从0到1/2PI
  cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2)
  //矩形下边线
  cxt.lineTo(radius, height)
  //左下角圆弧，弧度从1/2PI到PI
  cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI)
  //矩形左边线
  cxt.lineTo(0, radius)
  //左上角圆弧，弧度从PI到3/2PI
  cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2)
  //上边线
  cxt.lineTo(width - radius, 0)
  //右上角圆弧
  cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2)
  //右边线
  cxt.lineTo(width, height - radius)
  cxt.closePath()
}
/**
 * 绘制矩形边框
 * 参数：cxt、x坐标、y坐标、宽度、高度、圆角、border颜色
 */
function roundRectBorder(cxt, x, y, w, h, r, borderWidth) {
  if (w < 2 * r) r = w / 2
  if (h < 2 * r) r = h / 2
  cxt.beginPath()
  cxt.moveTo(x + r, y)
  cxt.arcTo(x + w, y, x + w, y + h, r)
  cxt.arcTo(x + w, y + h, x, y + h, r)
  cxt.arcTo(x, y + h, x, y, r)
  cxt.arcTo(x, y, x + w, y, r)
  cxt.closePath()
  cxt.lineWidth = borderWidth
}
//加载图片
function getImageInfo(image) {
  return new Promise((req, rj) => {
    // #ifndef APP-PLUS
    uni.getImageInfo({
      src: image,
      success: function (res) {
        req(res)
      },
    })
    // #endif
    // #ifdef APP-PLUS
    if (uni.getSystemInfoSync().platform == "ios") {
      uni.downloadFile({
        url: image,
        success: (res) => {
          res.path = res.tempFilePath
          req(res)
        },
      })
    } else {
      uni.getImageInfo({
        src: image,
        success: function (res) {
          req(res)
        },
      })
    }
    // #endif
  })
}

/**
 * 绘制圆形头像
 * 参数：cxt、图标路径path、x坐标、y坐标、宽度、高度
 */
function drawCircular(ctx, url, x, y, width, height) {
  //画圆形头像
  var avatarurl_width = width
  var avatarurl_heigth = height
  var avatarurl_x = x
  var avatarurl_y = y
  ctx.save()
  ctx.beginPath()
  ctx.arc(
    avatarurl_width / 2 + avatarurl_x,
    avatarurl_heigth / 2 + avatarurl_y,
    avatarurl_width / 2,
    0,
    Math.PI * 2,
    false
  )
  ctx.clip()
  ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth)
  ctx.restore()
}

/*
 * 绘制图片cover
 * t:cxt;
 * e:图片属性（通过getImageInfo获取）
 * s:x坐标
 * o:y坐标
 * i:绘制图片宽度
 * a:绘制图片高度
 */
function drawImgCover(t, e, s, o, i, a) {
  console.log(e, "drawImgCover")
  if (e.width / e.height >= i / a) {
    var r = e.height,
      n = Math.ceil((i / a) * r)
    t.drawImage(e.path, (e.width - n) / 2, 0, n, e.height, s, o, i, a)
  } else {
    var c = e.width,
      l = Math.ceil((a / i) * c)
    t.drawImage(e.path, 0, (e.height - l) / 2, e.width, l, s, o, i, a)
  }
}

/*
 * 文本自定义换行
 * family = " 'PingFang SC',tahoma,arial,'helvetica neue','hiragino sans gb','microsoft yahei',sans-serif";
 * var options = {
				font:"22px" + family,  字体大小
				ctx:ctx,          uni.createCanvasContext('firstCanvas')
				word:"文字",      文字
				maxWidth:750,     最大宽度
				maxLine:2,        最大行数
				x:100,            x坐标
				y:100,            y坐标
				l_h:40            行高
			}
 * callback 自定义函数
 */
function dealWords(options, callback) {
  options.ctx.font = options.font //设置字体
  callback && callback()
  var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth) //实际总共能分多少行
  var count = allRow >= options.maxLine ? options.maxLine : allRow //实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数

  var endPos = 0 //当前字符串的截断点
  for (var j = 0; j < count; j++) {
    var nowStr = options.word.slice(endPos) //当前剩余的字符串
    var rowWid = 0 //每一行当前宽度
    if (options.ctx.measureText(nowStr).width > options.maxWidth) {
      //如果当前的字符串宽度大于最大宽度，然后开始截取
      for (var m = 0; m < nowStr.length; m++) {
        rowWid += options.ctx.measureText(nowStr[m]).width //当前字符串总宽度
        if (rowWid > options.maxWidth) {
          if (j === options.maxLine - 1) {
            //如果是最后一行
            options.ctx.fillText(nowStr.slice(0, m - 1) + "...", options.x, options.y + (j + 1) * options.l_h) //(j+1)*18这是每一行的高度
          } else {
            options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * options.l_h)
          }
          endPos += m //下次截断点
          break
        }
      }
    } else {
      //如果当前的字符串宽度小于最大宽度就直接输出
      options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * options.l_h)
    }
  }
}
/*
 * 绘制圆角按钮
 * ctx:createCanvasContext
 * color:背景颜色;
 * x:x坐标
 * y:y坐标
 * width:宽
 * height:高
 * radius:圆角
 * text:文字
 * fontColor:文字颜色
 * textAlign: left/center/right
 */
function drawButton(ctx, color, x, y, width, height, radius, text, fontColor, textAlign) {
  //分为4条直线4个圆角绘制
  ctx.beginPath()
  ctx.fillStyle = color
  ctx.moveTo(x + radius, y)
  ctx.lineTo(x + width - radius, y)
  ctx.arc(x + width - radius, y + radius, radius, (Math.PI * 3) / 2, Math.PI * 2)
  ctx.lineTo(x + width, y + height - radius)
  ctx.arc(x + width - radius, y + height - radius, radius, Math.PI, Math.PI / 2)
  ctx.lineTo(x + radius, y + height)
  ctx.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI)
  ctx.lineTo(x, y + radius)
  ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2)
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.fillStyle = fontColor
  // ctx.font = 'normal bold 12px sans-serif';
  ctx.setTextAlign(textAlign)
  ctx.textBaseline = "middle"
  ctx.fillText(text, x + width / 2, y + height / 2)
}

export default {
  fillRoundRect: fillRoundRect, //绘制矩形
  roundRectBorder: roundRectBorder, //绘制矩形+边框
  getImageInfo: getImageInfo, //加载图片
  drawCircular: drawCircular, //绘制圆形头像
  drawImgCover: drawImgCover, //绘制图片cover
  dealWords: dealWords, //文本自定义换行
  drawButton: drawButton, //绘制圆角按钮
}
